前言

相信大家一定有遇過在共同製作一項作品時，每個人的表達方式不同，導致出現以下對話模式：
設計師「這邊的動畫結尾我要平滑的漸出效果。」
工程師「(寫了一堆程式碼)這樣可以嗎？」
設計師「恩...這邊在幫我改加速度明顯一點。」
工程師「(努力的調整)像這樣嗎？」
設計師「好像不是這樣吶...」
HaiYaa!! uncle Roger 都看不下去啦～

像這樣要透過反覆的對話才能確定好一個小動畫效果，真的是非常耗時又浪費成本啊！
甚至有時候還會加上有奉著客戶指令的PM或絕對權力的老闆意見。這時的工程師者會想「啊啊啊啊！」一邊抓頭髮一邊修改功能吧。

前面我們有介紹過，製作動畫最重要的就是掌握動畫元素的 時間 與 間距，而在
若是有接觸過諸如 after effect 等動畫製作軟體，就會知道我們在繪製動畫時都會參考一種率表，如下圖：

圖片來源

但是，製作網頁並沒有這種東西讓我們圖形化介面式的調整啊！怎麼辦？

別擔心，製作網頁動畫也是有的呦，接下來我們就來一一介紹如何使用 timing-function 來好好跟程式麻瓜溝通吧～

簡介

timing-function 為 CSS 透過計算後轉換出來的一種數學函式。它描述了在 Transition 或 Animation 內的動畫改變速度模式。

上圖為一個時間輸出比率的函數，[0,0]代表初始值、[1,1]代表結束值。

我們可以輸出大於 [1,1] 或 [0,0] 的數值，效果會類似於一種反彈狀態，因為動畫元素會超過最後關鍵幀在返回最終關鍵幀狀態。不過若數值輸入超過了允許值範圍，它會自動修改為最接近允許值的範圍。

輸入值超過了[1,1]，動畫效果類似於在結束時反彈

超過允許值範圍後修正圖

線性函式 Linear

動畫從頭到尾都是以以恆定速率運動。
基礎語法：

cubic-bezier(0.0, 0.0, 1.0, 1.0)

定時函式 Cubic Bezier

在 cubic-bezier() 內定義了一條貝茲曲線，這些曲線為平滑且連續狀態。

一條貝茲曲線需要四個時間與位置對應的點來定義 [P0, P1, P2, P3] ， P0 和 P3 為起始點與結束點。

若設定的 cubic-bezier() 為無效貝茲曲線，CSS 會直接忽略該 cubic-bezier()。

基礎語法：

cubic-bezier(x1, y1, x2, y2)

x1，y1，x2，y2 定義了橫坐標與縱座標值，[x1, x2]必須要在 0 和 1 範圍內，否則無效。

ease

動畫開始時漸入，中間加速度，最後減速結束。其效果類似於 ease-in-out，但這個屬性的開始階段會有明顯的加速度效果。

基礎語法：

cubic-bezier(0.25, 0.1, 0.25, 1.0)

ease-in

動畫開始時漸入，然後逐漸加速度直到結束，結束時會突然靜止。

基礎語法：

cubic-bezier(0.42, 0.0, 1.0, 1.0)

ease-in-out

動畫開始時漸入，中間加速度，最後在漸出，此屬性行為類似於 ease-in 函式，最後像ease-out。

基礎語法：

cubic-bezier(0.42, 0.0, 0.58, 1.0)

ease-out

動畫突然開始，中間逐漸減速度直到結束。

基礎語法：

cubic-bezier(0.0, 0.0, 0.58, 1.0)

Step 階躍函式

該函式輸出值以等距離前進，不會有中間幀數。它是多個 step 和 一個 step posion 組定義。

基礎語法：

steps(number_of_steps, direction)

動畫屬性關鍵字有：

• jump-start: 向左連續的函數，讓動畫在開始時發生直接跳到下一步的時間距離。
• jump-end: 向右的連續函數，讓動畫啟動一段時間後才會跳到下一步的時間距離。
• jump-both: 左右連續函數，在動畫開始時直接跳到下一步時間距離，並在倒數最後直接跳到結束時的時間距離。
• jump-none: 兩端均無跳耀。
  

step-start

動畫開始便立刻跳耀至最終狀態，並保持在最終狀態直到動畫時間結束。

基礎語法：

steps(1, jump-start) | steps(1, start)。

step-end

動畫保持在初始狀態，直到動畫時間結束時會直接跳到最終狀態。

基礎語法：

steps(1, jump-end) | steps(1, end)

如何在瀏覽器上查看 timing-function

講了這麼多，但是我們到底要如何用圖形將想要的 timing-function 調整好後給其他人看呢？

其實我們從瀏覽器上就可以查看囉，以下使用 google chrome devtool 示範：

• 打開瀏覽器的開發者工具，尋找到該動畫元素:
  

• 在該元素上的 「style」面板上找到該動畫設定的語法，並將游標滑到 timing-function 上:
  

• 打開 「cubic-bezier editor」:
  

如此一來就可以直接在瀏覽器上調整好動畫效果，再依據該設定去編寫程式囉！

使用工具設定動畫

但是如果你是程式麻瓜，要怎麼樣才能讓工程師知道你做好的動畫設定呢？
其實現在市面上也有很多工具可以輔助設計師等人員做網頁動畫開發，各位可以到下面連結玩玩看各種 timing function:

cubic-bezier.com

今天的介紹，相信對於程式開發者有大大增進效率，和平理性的跟設計師溝通，再也不用看著程式碼痛苦地條來調去最後大喊 HaiYaa~~！
相信大家在學會了查看 time function 之後一定都能夠準時下班。

那麼今天就到這邊，我們明天見囉～

參考資料

• W3.org - Easing Functions
• MDN - easing-function
• cubic-bezier.com